<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Easy Tooltip jQuery Plugin Demo</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easyTooltip.js"></script>
<script type="text/javascript">
	$(document).ready(function(){	
		$("a").easyTooltip();
		$("a#link").easyTooltip({
			tooltipId: "easyTooltip2",
			content: '<h4>Some title</h4><p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipiscing elit. Mauris placerat.</p>'
		});
	});
</script>
<meta name="description" content="Simple easy-to-use jQuery plugin for custom tooltips">
</meta>

<style>
body {
	margin:0;
	padding:40px;
	background:#fff;
	font:80% Arial, Helvetica, sans-serif;
	color:#555;
	line-height:180%;
}
h1{
	font-size:180%;
	font-weight:normal;
	}
h2{
	font-size:160%;
	font-weight:normal;
	}	
h3{
	font-size:140%;
	font-weight:normal;
	}	
img{border:none;}
pre{
	display:block;
	font:12px "Courier New", Courier, monospace;
	padding:10px;
	border:1px solid #bae2f0;
	background:#e3f4f9;	
	margin:.5em 0;
	}		

/* Easy Tooltip */

#easyTooltip{
	padding:5px 10px;
	border:1px solid #195fa4;
	background:#195fa4 url(bg.gif) repeat-x;
	color:#fff;
	}

#easyTooltip2{
	padding:5px 10px;
	border:1px solid #5e5e5e;
	background:#5e5e5e url(bg2.gif) repeat-x;
	color:#fff;
	width:250px;
	}
#easyTooltip2 h4, #easyTooltip2 p{
	margin:.25em 0;
	}	
					

/* // Easy Tooltip */

</style>
</head>
<body>

	<h1>Easy Tooltip jQuery Plugin Demo</h1>
	
	<script type="text/javascript" src="http://cssglobe.com/ads/blogsponsor.js"></script>
	
	<h2>Easy Tooltip with custom content</h2>
	
	<p>In this demo we are using custom content with Easy Tooltip plugin. Roll over <a href="http://cssglobe.com" id="link">this link</a> to view custom content sent to the plugin. <br />
	<strong>Note:</strong> I am using the plugin twice on this page. Besides custom content I also have custom id so I can style this tooltip separately. All other <strong><em>a</em></strong> tags will keep default settings. 
<h3>Usage</h3>
	
<pre>$(document).ready(function(){	
	$("a").easyTooltip();
	$("a#link").easyTooltip({
		tooltipId: "easyTooltip2",
		content: '&lt;h4p&gt;Some title&lt;/h4>&lt;/p&gt;Lorem ipsum dolor sit amet, &lt;strong&gt;consectetur&lt;/strong&gt; adipiscing elit. Mauris placerat.&lt;/p&gt;'
	});
});</pre>

	<h3>CSS</h3>
	
<pre>#easyTooltip{
	padding:5px 10px;
	border:1px solid #195fa4;
	background:#195fa4 url(bg.gif) repeat-x;
	color:#fff;
	}

#easyTooltip2{
	padding:5px 10px;
	border:1px solid #5e5e5e;
	background:#5e5e5e url(bg2.gif) repeat-x;
	color:#fff;
	width:250px;
	}
#easyTooltip2 h4, #easyTooltip2 p{
	margin:.25em 0;
	}	</pre>	
	
<p><a href="http://cssglobe.com/post/4380/easy-tooltip--jquery-plugin" title="read more about this jquery plugin">back to the article</a></p>
	
	<p><strong>Easy Tooltip</strong> jQuery Plugin is brought to you by <a href="http://cssglobe.com" title="web standards magazine and css news">Css Globe</a> and supported by <a href="http://templatica.com">Css Templates</a> by Templatica</p>


</body>
</html>
